<template>
  <div style="padding: 16px">
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <el-form :model="form">
          <el-form-item label="Mod贴图" :label-width="formLabelWidth" prop="src">
            <ossUpload :imageUrl="form.src ? domain + form.src : ''" :imgName="randomName" @upload-img="handler">
            </ossUpload>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="form.name" autocomplete="off" placeholder="请输入mod名称" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="类别" :label-width="formLabelWidth" prop="type">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开发者" :label-width="formLabelWidth" prop="developer">
            <el-input v-model="form.developer" autocomplete="off" placeholder="开发者常用昵称，如果是团队用逗号分隔" style="width: 300px">
            </el-input>
          </el-form-item>
          <el-form-item label="简介" :label-width="formLabelWidth" prop="introduce">
            <el-input type="textarea" :rows="4" v-model="form.introduce" autocomplete="off"
              placeholder="最好能用一句话说明白mod用途和功能，不超过20个字" style="width: 300px"></el-input>
          </el-form-item>
          <el-form-item label="详细介绍" :label-width="formLabelWidth" prop="completeIntroduce">
            <mavon-editor v-model="form.completeIntroduce" @imgAdd="imgUpload" class="editor-sty" :boxShadow="false"
              ref="md"></mavon-editor>
          </el-form-item>

        </el-form>
        <el-button type="primary" @click="updateMod" style="margin-left: 70px">确定</el-button>
      </el-tab-pane>
      <el-tab-pane label="人物" name="second" lazy>
        <keep-alive>
          <heroList :mid="$route.query.id" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="制作" name="third" lazy>
        <keep-alive>
          <techEdit :mid="$route.query.id" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="食谱" name="fourth" lazy>
        <keep-alive>
          <RecipeList :mid="$route.query.id" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="生物" name="six" lazy>
        <keep-alive>
          <AnimalList :mid="$route.query.id" />
        </keep-alive>
      </el-tab-pane>
      <el-tab-pane label="自然" name="seven" lazy>
        <keep-alive>
          <NatureList :mid="$route.query.id" />
        </keep-alive>
      </el-tab-pane>
      <!-- <el-tab-pane v-if="$route.query.id == '6041a52be3a3fb1f530b550a'" label="皮肤" name="eight" lazy> -->
      <el-tab-pane label="皮肤" name="eight" lazy>
        <keep-alive>
          <skinList :mid="$route.query.id" />
        </keep-alive>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import md5 from "md5-js";
import ossUpload from "@/components/ossUpload.vue";
import techEdit from "@/views/materials/TechList.vue";
import RecipeList from "@/views/recipe/RecipeList.vue";
import AnimalList from "@/views/animal/AnimalList.vue";
import NatureList from "@/views/nature/NatureList.vue";
import heroList from "@/views/hero/heroList.vue";
import skinList from "@/views/mods/skinList.vue";
import OSS from "ali-oss";
export default {
  data() {
    return {
      activeName: "first",
      formLabelWidth: "70px",
      form: {
        src: "",
        name: "",
        type: "",
        developer: "",
        introduce: "",
        completeIntroduce: "",
      },
      options: [
        {
          value: "1",
          label: "综合（类似棱镜和神话书说的大型mod）",
        },
        {
          value: "2",
          label: "人物",
        },
        {
          value: "3",
          label: "自身增强（装备，道具等）",
        },
        {
          value: "4",
          label: "环境（包含特殊地形，生物等）",
        },
        {
          value: "5",
          label: "工具（类似行为学）",
        },
        {
          value: "6",
          label: "其它",
        },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  watch: {
    "$route.query.id"() {
      this.fetchData();
    },
  },
  computed: {
    randomName() {
      let time = new Date();
      return md5(time);
    },
  },
  methods: {
    handler(src) {
      this.form.src = src;
    },
    async updateMod() {
      let {
        src,
        name,
        type,
        developer,
        introduce,
        completeIntroduce,
      } = this.form;
      let res = await this.axios.post("/mods/update", {
        id: this.$route.query.id,
        src,
        name,
        developer,
        type,
        introduce,
        completeIntroduce,
      });
      if (res.data.code == 0) {
        this.$message.success("修改成功！");
      } else {
        this.$message.error("修改失败！");
      }
    },
    async fetchData() {
      let res = await this.axios("/mods/single", {
        params: {
          id: this.$route.query.id,
        },
      });
      this.form = res.data;
    },
    imgUpload(filename, $file) {
      // oss配置
      const client = new OSS({
        endpoint: "oss-cn-beijing.aliyuncs.com",
        accessKeyId: "LTAI4FgrsFXo8ij335BxeRbp",
        accessKeySecret: "oG0PWkV0qOeDoJQfwEHOqIvTp16S0x",
        bucket: "stavebox",
      });
      // 图片路径拼接，dirName其实就是定义存在oss的哪个虚拟文件夹下的
      let time = new Date();
      let hash = md5(time);
      let imgType = $file.type.split("/")[1];
      let hashName = "Article/" + hash + "." + imgType;
      // 将文件流上传至oss
      client
        .put(hashName, $file)
        .then((res) => {
          let imgUrl = this.domain + res.name;
          this.$refs.md.$img2Url(filename, imgUrl);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    ossUpload,
    techEdit,
    RecipeList,
    AnimalList,
    NatureList,
    heroList,
    skinList
  },
};
</script>

<style></style>